<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: pink;
      }

      /* 准备类使用 */
      .circle {
        background-color: skyblue;
        border-radius: 50%;
        text-align: center;
        line-height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="box">类名操作样式</div>
  </body>
</html>
<script>
  // 通过类名className来操作样式
  // 如果是需要修改的样式比较多的时候  通过style样式来修改的额话很繁琐麻烦，使用类名className来修改

  // 1.获取box属性
  const box = document.querySelector(".box");
  // 2.通过类名className来操作样式属性
  // box.className='circle'
  // 这会 直接覆盖点整个className属性，重新替换新的属性值
  // 如果是追加类名（就是以前的类名也有值，再加上新的类名）的话
  box.className = "box circle";

  //   ***
  // 会直接覆盖掉整个 class, 导致以前的类名全部丢失
  // 使用时如果是追加类名, 还需要把以前的类名带上
  // 此方法操作类名相对比较麻烦, 如果是添加删除还需要记录以前的类名, 所以不推荐使用 (最传统的方法)
</script>
